<template>
  <div class="app-container search-list">
    <el-form ref="form" class="search-table-form" :model="formParams" label-width="140px" size="small" style="background: #fff;padding: 10px">
      <el-row :gutter="48" style="margin: 0">
        <el-col :span="8">
          <el-form-item label="邮箱：">
            <el-input v-model="formParams.searchText" placeholder="请输入邮箱" style="width: 100%" @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="消费金额：">
            <el-input placeholder="请输入"  style="width:calc(50% - 12px)" v-show="!lowConsumeMoney" @focus="focusShow('lowConsumeMoney')" @keyup.enter.native="handleSearch"></el-input>
            <el-input-number ref="lowConsumeMoney"  @blur="showEmptyInput('lowConsumeMoney', formParams.lowConsumeMoney)" v-show="lowConsumeMoney" v-model="formParams.lowConsumeMoney" placeholder="最低金额" style="width:calc(50% - 12px)" type="number" :min="0" :max="999999" :precision="2" :controls="false" @keyup.enter.native="handleSearch"></el-input-number>
            至
            <el-input placeholder="请输入" style="width:calc(50% - 12px)" v-show="!highConsumeMoney" @focus="focusShow('highConsumeMoney')" @keyup.enter.native="handleSearch"></el-input>
            <el-input-number  ref="highConsumeMoney" @blur="showEmptyInput('highConsumeMoney', formParams.highConsumeMoney)" v-show="highConsumeMoney"  v-model="formParams.highConsumeMoney" placeholder="最高金额" style="width:calc(50% - 12px)" type="number" :min="0" :max="999999" :precision="2" :controls="false" @keyup.enter.native="handleSearch"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="历史订单数：">
            <el-input placeholder="请输入"  style="width:calc(50% - 12px)" v-show="!lowOrderCount" @focus="focusShow('lowOrderCount')" @keyup.enter.native="handleSearch"></el-input>
            <el-input-number  ref="lowOrderCount"  @blur="showEmptyInput('lowOrderCount', formParams.lowOrderCount)" v-show="lowOrderCount" v-model="formParams.lowOrderCount" placeholder="最低数" style="width:calc(50% - 12px)" type="number" :min="0" :max="99999" :precision="0" :controls="false" @keyup.enter.native="handleSearch"></el-input-number>
            至
            <el-input placeholder="请输入"  style="width:calc(50% - 12px)" v-show="!highOrderCount" @focus="focusShow('highOrderCount')" @keyup.enter.native="handleSearch"></el-input>
            <el-input-number  ref="highOrderCount"  @blur="showEmptyInput('highOrderCount', formParams.highOrderCount)" v-show="highOrderCount" v-model="formParams.highOrderCount" placeholder="最低数" style="width:calc(50% - 12px)" type="number" :min="0" :max="99999" :precision="0" :controls="false" @keyup.enter.native="handleSearch"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="加入时间：">
            <el-date-picker
                @change="handleSearch"
                v-model="formParams.joinTime"
                end-placeholder="结束日期"
                range-separator="至"
                start-placeholder="开始日期"
                style="width: 100%"
                type="daterange"
                value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-form-item>
            <el-button size="small" type="primary" @click="handleSearch">搜索查询</el-button>
            <el-button size="small" type="default" @click="handleRest">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <table-pagination
        :showOperatingButton="false"
        ref="el-search-table"
        :columns="columns"
        :fetch="getData"
        :form-options="formOptions"
        :page-sizes="[20, 50, 100]"
        :adaptive = "fixOption"
        height="300"
        list-field="records"
        method="get"
        page-index-key="page"
        page-size-key="pageSize"
        total-field="totalElements"
        type="remote">
      <el-table-column slot="append" fixed="right" label="操作" width="180px">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="handleDetail(scope.row.id)">详情</el-button>
          <el-button plain size="mini" type="primary" @click="handleOrder(scope.row.id)">订单</el-button>
        </template>
      </el-table-column>
    </table-pagination>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import TablePagination from '_c/Tables/table-pagination';
import {getMemberPage} from '@/api/member';
import {utcFormat, currency} from '@/utils/filters';

export default {
    name: 'member-list',
    components: {TablePagination},
    data () {
        return {
            fixOption: {fixedHeader: true},
            formParams: {
                searchText: '',
                joinTime: [],
                startTime: '',
                endTime: '',
                lowConsumeMoney: '',
                highConsumeMoney: '',
                lowOrderCount: '',
                highOrderCount: ''
            },
            pageParams: {
                page: 1,
                pageSize: 20
            },
            formOptions: {
                showResetBtn: false,
                showSearchBtn: false,
                inline: true,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: []
            },
            columns: [
                {label: '邮箱', prop: 'email'},
                {label: '加入时间',
                    prop: 'createDate',
                    render: row => {
                        return utcFormat(row.createDate, 'YYYY-MM-DD HH:mm:ss', this.timeZone);
                    }},
                {label: '消费金额',
                    prop: 'consumeMoney',
                    render: row => {
                        return currency(row.consumeMoney, this.siteInfo.currencySymbol || '$');
                    }},
                {label: '历史订单数', prop: 'orderCount'}
            ],
            lowConsumeMoney: false,
            highConsumeMoney: false,
            lowOrderCount: false,
            highOrderCount: false
        };
    },
    mounted () {
        console.log(this.$store, 1);
    },
    methods: {
        getData (params) {
            this.formParams.siteId = this.siteId;
            return new Promise((resolve, reject) => {
                getMemberPage({...this.formParams, ...params}).then((res) => {
                    resolve(res);
                }).catch((error) => {
                    reject(error);
                });
            });
        },
        handleSearch () {
            if (this.formParams.joinTime && this.formParams.joinTime.length > 0) {
                let startTime = this.formParams.joinTime[0].replace(/-/g, '/') + ' 00:00:00 UTC' + this.timeZone;
                this.formParams.startTime = new Date(startTime).getTime();
                let endTime = this.formParams.joinTime[1].replace(/-/g, '/') + ' 23:59:59 UTC' + this.timeZone;
                this.formParams.endTime = new Date(endTime).getTime();
                delete this.formParams.joinTime;
            } else {
                this.formParams.startTime = '';
                this.formParams.endTime = '';
            }
            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
        },
        handleDetail (id) {
            this.$router.push({name: 'member-detail', params: {id}});
        },
        handleOrder (id) {
            this.$router.push({name: 'member-order', params: {id}});
        },
        handleRest () {
            this.formParams = {
                searchText: '',
                joinTime: [],
                startTime: '',
                endTime: '',
                lowConsumeMoney: '',
                highConsumeMoney: '',
                lowOrderCount: '',
                highOrderCount: ''
            };
            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
        },
        showEmptyInput (name, val) {
            if (val === 0) {
                this[name] = false;
            }
        },
        focusShow (name) {
            this[name] = true;
            this.$nextTick(() => {
                this.$refs[name].focus();
            });
        }
    },
    computed: {
        ...mapGetters(['timeZone', 'siteList']),
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>

<style lang="scss" scoped>
.search-list {
  h4 {
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}
</style>
